import React, { Component } from 'react';
import { Row, Col, Icon, Skeleton } from 'antd';
import { Link, withRouter } from 'react-router-dom'
import 'antd/dist/antd.css';

import { formatPlayCount } from '../../../api/formatIndexContent'
import imgURL from '../../../source/songRecommend.png';
import './index.scss';


class HotSongRecommend extends Component {
	constructor(props) {
		super(props);
		this.state = {

		}
	}

	handleClick = (id) => {
		this.props.history.push(`/song?id=${id}`)
	};

	renderMain = () => {
		const recommendSongs = this.props.hotCommendSong || [];
		const renderSongCommend = recommendSongs ? recommendSongs.map(song =>
			<div className="song-item">
				<div className="song-img-container">
					<div
						className="song-img"
						style={{ backgroundImage: `url(${"http://cyq.center:8000/"+song.picUrl})` }}
					></div>
					<div className='clear-fix'>
						<div className="play-count">
							<Icon
								type="customer-service"
								style={{ marginLeft: "5px", marginRight: "5px" }}
							/>
							<span>{formatPlayCount(song.playCount)}</span>
						</div>
						<div className="song-play-btn">
							<Icon type="play-circle" onClick={() => this.handleClick(song.id)}/>
						</div>
					</div>
				</div>
				<div style={{
					color: "#000", fontSize: "15px", width: "100%",
					overflow: "hidden", textOverflow: "ellipsis",
					whiteSpace: "nowrap",
				}}>
					{song.name}
				</div>
			</div>
		) : null
		return <div className="main">
			<img
				src={imgURL}
				style={{ borderRadius: "10px", width: "20%" }}
			/>
			<div className="right">
				{recommendSongs ? renderSongCommend : <Skeleton />}
			</div>
		</div>
	}; 

	render() {
		return (
			<div style={{ paddingBottom: "100px" }}>
				<div>
					<Row style={{ height: "35px", lineHeight: "35px" }}>
						<Col span={4} style={{ color: "#000", fontSize: "23px", fontWeight: "bold" }}>热门歌曲推荐</Col>
						<Col span={19}> </Col>
						<Col span={1} style={{ fontSize: "12px" }}>
							<Link to='/discover/toplist?type=1' style={{ color: "#666" }}>更多</Link>
						</Col>
					</Row>
				</div>
				{this.renderMain()}
			</div>
		)
	}
}

export default withRouter(HotSongRecommend)
